<template>
  <div>
    <div
      class=""
      style="height: 865px;position: relative;width: 1860px; margin-top: 20px;;padding: 40px;"
    >
      <!-- 主模块 -->
      <div
        class=""
        style=""
      />

      <div style="display: flex;justify-content: space-between;">
        <div class="numBlock">
          <div
            class="title"
            style="margin-right: 10px;font-size: 12px;color: #708ead;position: relative;left: 150px;"
          >
            <span
              v-for="(label, index) in labels"
              :key="index"
            >
              <span
                :class="{'active': countWnType === index}"
                style=" cursor: pointer;"
                @click="selectCountWnType(index)"
              >{{ label }}</span>
              <span
                v-if="index !='year'"
                style="margin-right: 2px;margin-left: 2px;"
              >|</span>
            </span>
          </div>
          <div class="numTitle">
            污泥总成本
          </div>
          <div class="value">
            <span class="number">{{ wn_cost_total }}</span>
            <span class="unit">元</span>
          </div>
          <div class="total" />
        </div>
        <div class="numBlock">
          <div
            class="title"
            style="margin-right: 10px;font-size: 12px;color: #708ead;position: relative;left: 150px;"
          >
            <span
              v-for="(label, index) in labels"
              :key="index"
            >
              <span
                :class="{'active': countYsType === index}"
                style=" cursor: pointer;"
                @click="selectCountYsType(index)"
              >{{ label }}</span>
              <span
                v-if="index !='year'"
                style="margin-right: 2px;margin-left: 2px;"
              >|</span>
            </span>
          </div>
          <div class="numTitle">
            水费总成本
          </div>
          <div class="value">
            <span class="number">{{ ys_cost_total }}</span>
            <span class="unit">元</span>
          </div>
          <div class="total" />
        </div>

        <div class="numBlock">
          <div
            class="title"
            style="margin-right: 10px;font-size: 12px;color: #708ead;position: relative;left: 150px;"
          >
            <span
              v-for="(label, index) in labels"
              :key="index"
            >
              <span
                :class="{'active': countJyType === index}"
                style=" cursor: pointer;"
                @click="selectCountJyType(index)"
              >{{ label }}</span>
              <span
                v-if="index !='year'"
                style="margin-right: 2px;margin-left: 2px;"
              >|</span>
            </span>
          </div>
          <div class="numTitle">
            药量总成本
          </div>
          <div class="value">
            <span class="number">{{ jy_cost_total }}</span>
            <span class="unit">元</span>
          </div>
          <div class="total">
            <span style="margin-right: 10px;">PAC：{{ jy_pac_cost_total }} 元 </span>
            <span style="margin-right: 10px;">气浮PAM：{{ jy_pam1_cost_total }} 元 </span>
            <span style="margin-right: 10px;">脱水机PAM：{{ jy_pam2_cost_total }} 元 </span>
          </div>
          <div
            class="total"
            style="position: absolute;top: 175px;"
          >
            <span style="margin-right: 10px;">碳源：{{ jy_ty_cost_total }} 元 </span>
            <span style="margin-right: 10px;">次钠：{{ jy_cn_cost_total }} 元 </span>
          </div>
        </div>
        <div class="numBlock">
          <div
            class="title"
            style="margin-right: 10px;font-size: 12px;color: #708ead;position: relative;left: 150px;"
          >
            <span
              v-for="(label, index) in labels"
              :key="index"
            >
              <span
                :class="{'active': countYdType === index}"
                style=" cursor: pointer;"
                @click="selectCountYdType(index)"
              >{{ label }}</span>
              <span
                v-if="index !='year'"
                style="margin-right: 2px;margin-left: 2px;"
              >|</span>
            </span>
          </div>
          <div class="numTitle">
            电量总成本
          </div>
          <div class="value">
            <span class="number">{{ yd_cost_total }}</span>
            <span class="unit">元</span>
          </div>
          <div class="total">
            <span style="margin-right: 20px;">生产：{{ yd_sc_cost_total }} 元 </span>
            <span>公辅：{{ yd_gf_cost_total }} 元 </span>
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 230px;left: 40px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 300px;position: relative;width: 580px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div
            class="d-flex"
            style="justify-content: space-between;"
          >
            <div class="title">
              <img src="../assets/icon-title.png">
              <span style="margin-left: 5px;">污泥量成本</span>
            </div>
            <div
              class="title"
              style="margin-right: 10px;font-size: 12px;color: #708ead;"
            >
              <span
                v-for="(label, index) in labels2"
                :key="index"
              >
                <span
                  :class="{'active': countWnType2 === index}"
                  style=" cursor: pointer;"
                  @click="selectCountWnType2(index)"
                >{{ label }}</span>
                <span
                  v-if="index !='year'"
                  style="margin-right: 2px;margin-left: 2px;"
                >|</span>
              </span>
            </div>
          </div>
          <div>
            <CenterLeftChart
              :date-str="reportDate"
              :period-type="countWnType2"
            />
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 230px;left: 640px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 300px;position: relative;width: 580px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div
            class="d-flex"
            style="justify-content: space-between;"
          >
            <div class="title">
              <img src="../assets/icon-title.png">
              <span style="margin-left: 5px;">水费量成本</span>
            </div>
            <div
              class="title"
              style="margin-right: 10px;font-size: 12px;color: #708ead;"
            >
              <span
                v-for="(label, index) in labels2"
                :key="index"
              >
                <span
                  :class="{'active': countYsType2 === index}"
                  style=" cursor: pointer;"
                  @click="selectCountYsType2(index)"
                >{{ label }}</span>
                <span
                  v-if="index !='year'"
                  style="margin-right: 2px;margin-left: 2px;"
                >|</span>
              </span>
            </div>
          </div>
          <div>
            <!-- <CenterLeftChart /> -->
            <CenterChart
              :date-str="reportDate"
              :period-type="countYsType2"
            />
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 550px;left: 40px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 300px;position: relative;width: 1180px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div
            class="d-flex"
            style="justify-content: space-between;"
          >
            <div class="title">
              <img src="../assets/icon-title.png">
              <span style="margin-left: 5px;">药量成本</span>
            </div>
            <div
              class="title"
              style="margin-right: 10px;font-size: 12px;color: #708ead;"
            >
              <span
                v-for="(label, index) in labels2"
                :key="index"
              >
                <span
                  :class="{'active': countJyType2 === index}"
                  style=" cursor: pointer;"
                  @click="selectCountJyType2(index)"
                >{{ label }}</span>
                <span
                  v-if="index !='year'"
                  style="margin-right: 2px;margin-left: 2px;"
                >|</span>
              </span>
            </div>
          </div>
          <div>
            <CenterBottomChart
              :date-str="reportDate"
              :period-type="countJyType2"
            />
          </div>
        </div>
      </div>
      <div style="position: absolute;top: 230px;right: 40px;">
        <!-- 模块1 -->
        <div
          class="bg"
          style="height: 620px;position: relative;width: 580px;"
        >
          <div>
            <img src="../assets/icon-left-top.png">
            <div style="position: absolute;bottom: 0;">
              <img src="../assets/icon-left-bottom.png">
            </div>
            <div style="position: absolute;top: 3px;right: 3px;">
              <img src="../assets/icon-right-top2.png">
            </div>
            <div style="position: absolute;bottom: 0;right: 3px;">
              <img src="../assets/icon-right-bottom.png">
            </div>
          </div>
          <div
            class="d-flex"
            style="justify-content: space-between;"
          >
            <div class="title">
              <img src="../assets/icon-title.png">
              <span style="margin-left: 5px;">电量成本</span>
            </div>
            <div
              class="title"
              style="margin-right: 10px;font-size: 12px;color: #708ead;"
            >
              <span
                v-for="(label, index) in labels2"
                :key="index"
              >
                <span
                  :class="{'active': countYdType2 === index}"
                  style=" cursor: pointer;"
                  @click="selectCountYdType2(index)"
                >{{ label }}</span>
                <span
                  v-if="index !='year'"
                  style="margin-right: 2px;margin-left: 2px;"
                >|</span>
              </span>
            </div>
          </div>
          <div>
            <!-- <CenterLeftChart /> -->
            <CenterRightChart
              :date-str="reportDate"
              :period-type="countYdType2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import CenterLeftChart from './AnalysisChart/centerLeftChart.vue'
	import CenterChart from './AnalysisChart/centerChart.vue'
	import CenterRightChart from './AnalysisChart/centerRightChart.vue'
	import CenterBottomChart from './AnalysisChart/centerBottomChart.vue'
	export default {
		components: {
			CenterLeftChart,
			CenterChart,
			CenterRightChart,
			CenterBottomChart
		},
		data() {
			return {
				reportDate: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
				wn_cost_total: "0",
				yd_cost_total: "0",
				yd_sc_cost_total: "0",
				yd_gf_cost_total: "0",
				jy_cost_total: "0",
				jy_pac_cost_total: "0",
				jy_pam1_cost_total: "0",
				jy_pam2_cost_total: "0",
				jy_ty_cost_total: "0",
				jy_cn_cost_total: "0",
				ys_cost_total: "0",
				countWnType: 'day',
				countWnType2: 'week',
				countYdType: 'day',
				countYdType2: 'week',
				countJyType: 'day',
				countJyType2: 'week',
				countYsType: 'day',
				countYsType2: 'week',
				url: {
					costTotal: '/api/report/analysis/costTotal',
					costTotalGroup: '/api/report/analysis/costTotalGroup',
				},
				labels: {
					"day": '日',
					"week": '周',
					"month": '月',
					"year": '年'
				},
				labels2: {
					"week": '周',
					"month": '月',
					"year": '年'
				},

			}
		},
		mounted() {
			this.getWnCostTotal()
			this.getYdCostTotal()
			this.getJyCostTotal()
			this.getYsCostTotal()
		},
		methods: {
			getWnCostTotal() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.costTotal,
					params: {
						periodType: this.countWnType,
						countType: "WN",
						dateStr: this.reportDate
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.wn_cost_total = (+resData.total_product).toFixed(2)
				})
			},
			getYsCostTotal() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.costTotal,
					params: {
						periodType: this.countYsType,
						countType: "YS",
						dateStr: this.reportDate
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.ys_cost_total = (+resData.total_product).toFixed(2)
				})
			},
			getYdCostTotal() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.costTotal,
					params: {
						periodType: this.countYdType,
						countType: "YD",
						dateStr: this.reportDate
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.yd_sc_cost_total = (+resData.total_product_sc).toFixed(2)
					_this.yd_gf_cost_total = (+resData.total_product_gf).toFixed(2)
					_this.yd_cost_total = (resData.total_product_sc + resData.total_product_gf).toFixed(2)
				})
			},
			getJyCostTotal() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.costTotal,
					params: {
						periodType: this.countJyType,
						countType: "JY",
						dateStr: this.reportDate
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.jy_pac_cost_total = (+resData.total_product_pac).toFixed(2)
					_this.jy_pam1_cost_total = (+resData.total_product_pam1).toFixed(2)
					_this.jy_pam2_cost_total = (+resData.total_product_pam2).toFixed(2)
					_this.jy_ty_cost_total = (+resData.total_product_ty).toFixed(2)
					_this.jy_cn_cost_total = (+resData.total_product_cn).toFixed(2)
					_this.jy_cost_total = (resData.total_product_pac + resData.total_product_pam1 + 
					resData.total_product_pam2 + resData.total_product_ty + resData.total_product_cn).toFixed(2)

				})
			},

			selectCountWnType(label) {
				this.countWnType = label;
				this.getWnCostTotal()
			},
			selectCountYdType(label) {
				this.countYdType = label;
				this.getYdCostTotal()
			},
			selectCountJyType(label) {
				this.countJyType = label;
				this.getJyCostTotal()
			},
			selectCountYsType(label) {
				this.countYsType = label;
				this.getYsCostTotal()
			},
			selectCountWnType2(label) {
				this.countWnType2 = label;
			},
			selectCountYdType2(label) {
				this.countYdType2 = label;
			},
			selectCountJyType2(label) {
				this.countJyType2 = label;
			},
			selectCountYsType2(label) {
				this.countYsType2 = label;
			}
		}
	}
</script>

<style scoped>
	.active {
		font-weight: bolder;
		color: #318cd4;
		font-size: 14px;
	}

	.numBlock {
		background-image: url(../assets/num-bg.png);
		background-size: 100% 100%;
		width: 400px;
		height: 150px;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */

		.numTitle {
			font-size: 18px;
			/* 标题字体大小 */
			color: #ffffff;
			/* 标题字体颜色 */
			margin-bottom: 10px;
			/* 和数字部分的间距 */
			/* 和数字部分的间距 */
		}

		.value {
			display: flex;
			align-items: baseline;
			margin-top: 10px;
			/* 对齐数字和单位 */
		}

		.value .number {
			font-size: 36px;
			/* 数字字体大小 */
			color: #00d8ff;
			/* 数字字体颜色 */
			font-weight: bold;
			/* 数字加粗 */
		}

		.value .unit {
			font-size: 18px;
			/* 单位字体大小 */
			color: #ffffff;
			/* 单位字体颜色 */
			margin-left: 10px;
			/* 和数字之间的间距 */
		}

		.total {
			/* margin-top: 10px; */
			position: relative;
			top: 10px;
			font-size: 10px;
			line-height: 12px;
			height: 12px;
			/* 总计字体大小，比标题小 */
			color: #4c6681;
			/* 总计字体颜色 */
		}
	}
</style>
